import React, { Component } from 'react'
import './index.less'
import { Card,  Spin,Icon,Alert } from 'antd'
export default class Buttons extends Component {
    render(){
        const icon = <Icon type="loading" style={{fontSize:24}}/>
        return(
            <div>
                <Card title="Spin用法" class="card-wrap">
                    <Spin size='small'></Spin>
                    <Spin style={{margin:'0 10px'}}></Spin>
                    <Spin size='large'></Spin>
                    {/* indicator 指定图标 spining 是否选择 静态图不可以 */}
                    <Spin indicator={icon} style={{ margin: '0 10px' }}></Spin>
                </Card>
                <Card title='内容遮罩' class="card-wrap">
                    <Alert message="React" description="react高级实战课程" type='info'></Alert>
                    <Alert message="React" description="react高级实战课程" type='warning'></Alert>
                    <Spin tip="加载中...">
                        <Alert message="React" description="react高级实战课程" type='success'></Alert>
                    </Spin>
                    <Spin indicator={icon} tip="Loading...">
                        <Alert message="React" description="react高级实战课程" type='success'></Alert>
                    </Spin>
                </Card>
            </div>
        )
    }
}